<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				display: flex;
			}
			.wrap {
				width: 100px;
				height: 100px;
				border: 2px solid #575757;
				border-radius: 15px;
				margin: 20px;
				display: flex;
				padding: 15px;
				flex-wrap: wrap;
				box-sizing: border-box;
			}
			.item {
				display: block;
				width: 13px;
				height: 13px;
				background-color: #ff6700;
				border: 2px solid #080808;
				border-radius: 50%;
			}
			.one {
				justify-content: center;
				align-items: center;
			}
			.two {
				justify-content: space-around;
				align-items: center;
			}
			.three {
				justify-content: space-between;
				padding: 18px;
			}
			.three .item:nth-child(2) {
				align-self: center;
			}
			.three .item:nth-child(3) {
				align-self: flex-end;
			}
			.four .item{
				margin: 8px;
			}
			.five {
				padding: 10px;
				justify-content: center;
				align-content: center;
			}
			.five .item{
				margin: 10px;
			}
			.five .item:nth-child(3){
				align-self: center;
				margin: 0 20px;
			}
			.six {
				justify-content: center;
				align-content: center;
				padding: 0 15px;
				height: 100px;
			}
			.six .item{
				margin: 6px;
			}
			.six .item:nth-child(odd) {
				margin-right: 12px;
			}
		</style>
	</head>
	<body>
		<div class="wrap one">
			<span class="item"></span>
		</div>
		<div class="wrap two">
			<span class="item"></span>
			<span class="item"></span>
		</div>
		<div class="wrap three">
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
		</div>
		<div class="wrap four">
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
		</div>
		<div class="wrap five">
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
		</div>
		<div class="wrap six">
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
			<span class="item"></span>
		</div>
	</body>
</html>
